<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('货位履历')"/>
	<link th:href="@{/assets/libs/layui/css/layui.css}" media="all" rel="stylesheet">
	<style>
		[v-cloak] {
			display: none;
		}
		.el-date-editor.el-input, .el-date-editor.el-input__inner {
			width: 200px!important;
		}
		.el-input__icon {
			line-height: 0!important;
		}
	</style>
</head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
							<li v-if="checkedSearch.indexOf('物料编码') != -1">
								物料编码：<input type="text" name="itemCode"/>
							</li>
							<li v-if="checkedSearch.indexOf('物料名称') != -1">
								物料名称：
								<select name="itemId">
									<option value="">全部</option>
									<option v-for="(item, index) in items" :key="index" :value="item.itemId" v-cloak>{{item.itemName}}</option>
								</select>
							</li>
							<li v-if="checkedSearch.indexOf('货位编码') != -1">
								货位编码：<input type="text" name="cellCode"/>
							</li>
							<li v-if="checkedSearch.indexOf('巷道') != -1">
								巷道：
								<select name="shelfId">
									<option value="">全部</option>
									<option v-for="(item, index) in shelfList" :key="index" :value="item.shelfId" v-cloak>{{item.shelfName}}</option>
								</select>
							</li>
							<li v-if="checkedSearch.indexOf('排') != -1">
								排：
								<select name="sPai">
									<option value="">全部</option>
									<option v-for="(item, index) in sPaiList" :key="index" :value="item.id" v-cloak>{{item.num}}</option>
								</select>
							</li>
							<li v-if="checkedSearch.indexOf('列') != -1">
								列：
								<select name="sLie">
									<option value="">全部</option>
									<option v-for="(item, index) in sLieList" :key="index" :value="item.id" v-cloak>{{item.num}}</option>
								</select>
							</li>
							<li v-if="checkedSearch.indexOf('层') != -1">
								层：
								<select name="sFloor">
									<option value="">全部</option>
									<option v-for="(item, index) in sFloorList" :key="index" :value="item.id" v-cloak>{{item.num}}</option>
								</select>
							</li>
							<li v-if="checkedSearch.indexOf('托盘号') != -1">
								托盘号：<input type="text" name="boxCode"/>
							</li>
							<li v-if="checkedSearch.indexOf('批次') != -1" style="position: relative">
								批次：
								<input type="text" placeholder="请按格式输入：2021/01/01/1" class="inputInfo" v-model="searchBatch" @focus="focusFn()" @blur="searchBatchYZ()"/>
								<ul id="ul_" v-show="showList" style="position: absolute;right: 0;width: 200px;height: 285px;z-index: 10;background-color: #fff;overflow: auto;border: 1px solid #dddddd;padding-left: 5px">
									<li style="cursor: pointer;width: 100%" v-for="(item, index) in batchList" :key="index" @click="chooseBatch(item.batchName)">{{item.batchName}}</li>
								</ul>
								<input type="hidden" name="batch" v-model="searchBatch">
							</li>
							<li class="select-time" v-show="checkedSearch.indexOf('生产日期') != -1">
								<label>生产日期：</label>
								<input type="text" class="time-input" id="pd" placeholder="选择时间" name="pd"/>
							</li>
							<li class="select-time" v-show="checkedSearch.indexOf('有效期至') != -1">
								<label>有效期至：</label>
								<input type="text" class="time-input" id="exp" placeholder="选择时间" name="exp"/>
							</li>
							<li v-show="checkedSearch.indexOf('码垛时间') != -1">
								<label>码垛时间：</label>
								<el-date-picker
									id="areaStartTime"
									name="areaStartTime"
									v-model="areaStartTimeValue"
									value-format="yyyy-MM-dd HH:mm:ss"
									type="datetime"
									@change="compare"
									placeholder="开始时间">
								</el-date-picker>
								<span>-</span>
								<el-date-picker
									id="areaEndTime"
									name="areaEndTime"
									v-model="areaEndTimeValue"
									value-format="yyyy-MM-dd HH:mm:ss"
									type="datetime"
									@change="compare"
									placeholder="结束时间">
								</el-date-picker>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" :class="flag ? 'disabled' : ''" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()" @click="searchBatchReset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
								<a class="btn btn-success btn-rounded btn-sm" @click="moreSearch()"><i class="fa fa-edit"></i>&nbsp;更多</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			<el-dialog title="搜索条件" width="200px" :visible.sync="showMore">
				<el-row>
					<el-col :span="24">
						<el-checkbox style="margin-left: 28px" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
						<el-checkbox-group v-model="checkedSearch" @change="handleCheckedSearchChange">
							<el-checkbox style="display: block;margin-left: 28px" v-for="item in searches" :label="item" :key="item" v-cloak>{{item}}</el-checkbox>
						</el-checkbox-group>
					</el-col>
				</el-row>
			</el-dialog>
	        <div class="btn-group-sm" id="toolbar" role="group">
				<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="in:boxItemRecord:export">
					<i class="fa fa-download"></i> 导出
            	</a>
				<a class="btn btn-primary" onclick="$.table.print()">
					<i class="fa fa-plus"></i> 打印
				</a>
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap"></table>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var prefix = ctx + "in/boxItemRecord";

		const searchOptions = ['物料编码', '物料名称', '货位编码', '巷道', '排', '列', '层', '托盘号', '批次', '生产日期', '有效期至', '码垛时间'];

		var app = new Vue({
			el: '.container-div',
			data: {
				showMore: false,
				checkAll: false,
				checkedSearch: ['物料名称', '巷道', '托盘号', '批次', '码垛时间'],
				searches: searchOptions,
				isIndeterminate: true,
				items: [],
				batchs: [],
				shelfList: [],
				sPaiList: [
					{id: 1, num: '1排'},
					{id: 2, num: '2排'},
					{id: 3, num: '3排'},
					{id: 4, num: '4排'},
					{id: 5, num: '5排'},
					{id: 6, num: '6排'},
					{id: 7, num: '7排'},
					{id: 8, num: '8排'},
					{id: 9, num: '9排'},
					{id: 10, num: '10排'},
					{id: 11, num: '11排'},
					{id: 12, num: '12排'}
				],
				sLieList: [
					{id: 1, num: '1列'},
					{id: 2, num: '2列'},
					{id: 3, num: '3列'},
					{id: 4, num: '4列'},
					{id: 5, num: '5列'},
					{id: 6, num: '6列'},
					{id: 7, num: '7列'},
					{id: 8, num: '8列'},
					{id: 9, num: '9列'},
					{id: 10, num: '10列'},
					{id: 11, num: '11列'},
					{id: 12, num: '12列'},
					{id: 13, num: '13列'},
					{id: 14, num: '14列'},
					{id: 15, num: '15列'},
					{id: 16, num: '16列'},
					{id: 17, num: '17列'},
					{id: 18, num: '18列'},
					{id: 19, num: '19列'},
					{id: 20, num: '20列'},
					{id: 21, num: '21列'},
					{id: 22, num: '22列'},
					{id: 23, num: '23列'},
					{id: 24, num: '24列'}
				],
				sFloorList: [
					{id: 1, num: '1层'},
					{id: 2, num: '2层'},
					{id: 3, num: '3层'},
					{id: 4, num: '4层'}
				],
				flag: false,
				areaStartTimeValue: '',
				areaEndTimeValue: '',
				searchBatch: '',
				showList: false,
				batchList: [],
			},
			methods: {
				// 函数防抖
				_debounce(wait){
					clearTimeout(this.timer);
					this.timer = setTimeout(() => {
						this.getSelectData(this.searchBatch.trim());
					}, wait)
				},
				//已选批次
				chooseBatch(val){
					this.searchBatch = val;
				},
				//重置输入批次
				searchBatchReset(){
					this.searchBatch = '';
				},
				//验证输入批次
				searchBatchYZ(){
					if(this.searchBatch.trim() != ''){
						var arr = [];
						for(var i = 0; i < this.batchs.length; i++){
							arr.push(this.batchs[i].batchName);
						}
						var index = $.inArray(this.searchBatch.trim(), arr);
						if(index < 0){
							$.modal.alertError("不存在该批次");
							this.searchBatchReset();
						}
					}
				},
				//批次输入框聚焦
				focusFn(){
					if(document.getElementsByClassName('inputInfo')[0] == document.activeElement){
						this._debounce(500);
					}
					this.showList = true;
				},
				//根据批次输入框内容匹配批次列表
				getSelectData(val){
					this.batchList = [];
					for(var i = 0; i < this.batchs.length; i++){
						if(this.batchs[i].batchName.indexOf(val) != -1){
							this.batchList.push(this.batchs[i]);
						}
					}
				},
				compare: function(){
					if(this.areaStartTimeValue != '' && this.areaEndTimeValue != ''){
						if(this.areaStartTimeValue != null && this.areaEndTimeValue != null){
							var a = new Date(this.areaStartTimeValue);
							var b = new Date(this.areaEndTimeValue);
							if(a > b){
								$.modal.alertWarning("结束时间需大于开始时间");
								this.flag = true;
							}else{
								this.flag = false;
							}
						}else if(this.areaStartTimeValue == null){
							this.areaStartTimeValue = '';
							this.flag = false;
						}else if(this.areaEndTimeValue == null){
							this.areaEndTimeValue = '';
							this.flag = false;
						}
					}
				},
				//获取巷道列表
				getShelfList: function(){
					var that = this;
					$.ajax({
						cache: true,
						type: "POST",
						url: "/system/shelfInfo/list",
						data: {},
						async: false,
						error: function(request){
							$.modal.alertError("系统错误");
						},
						success: function(data){
							that.shelfList = data.rows;
						}
					});
				},
				//获取物料列表
				getItems: function(){
					var that = this;
					$.ajax({
						cache: true,
						type: "POST",
						url: "/system/itemInfo/findList",
						data: {},
						async: false,
						error: function(request){
							$.modal.alertError("系统错误");
						},
						success: function(data){
							that.items = data.rows;
						}
					});
				},
				//获取批次列表
				getBatchs: function(){
					var that = this;
					$.ajax({
						cache: true,
						type: "POST",
						url: "/boxItembacth/findList",
						data: {},
						async: false,
						error: function(request){
							$.modal.alertError("系统错误");
						},
						success: function(data){
							that.batchs = data.rows;
						}
					});
				},
				moreSearch(){
					this.showMore = true;
				},
				handleCheckAllChange(val){
					this.checkedSearch = val ? searchOptions : [];
					this.isIndeterminate = false;
				},
				handleCheckedSearchChange(value){
					let checkedCount = value.length;
					this.checkAll = checkedCount === this.searches.length;
					this.isIndeterminate = checkedCount > 0 && checkedCount < this.searches.length;
				}
			},
			created(){
				this.getShelfList();
				this.getItems();
				this.getBatchs();
			},
			watch: {
				'searchBatch': {
					handler: function(){
						this.focusFn();
					}
				}
			},
			mounted(){
				let that = this;
				document.addEventListener('click', function(e){
					if(e.target.className != 'inputInfo'){
						that.$nextTick(() => {
							that.showList = false;
						})
					}
				})
				document.getElementById('ul_').onmousedown = function(e){
					if(e && e.preventDefault){
						e.preventDefault();
					}else{
						window.event.returnValue = false;
					}
					return false;
				};
			}
		})

        $(function () {
            var options = {
                url: prefix + "/findList",
				exportUrl: prefix + "/export",
                modalName: "货位履历",
		        showExport: false,
                columns: [
					{
						field: 'id',
						title: 'ID',
						align: 'center',
						visible: false
					},
					{
						field: 'itemCode',
						title: '物料编码',
						align: 'center',
						visible: false
					},
					{
						field: 'itemName',
						title: '物料名称',
						align: 'center',
						visible: true
					},
					{
						field: 'cellCode',
						title: '货位编码',
						align: 'center',
						visible: false
					},
					{
						field: 'location',
						title: '货位描述',
						align: 'center',
						visible: true
					},
					{
						field: 'shelfName',
						title: '巷道',
						align: 'center',
						visible: false
					},
					{
						field: 'sPai',
						title: '排',
						align: 'center',
						visible: false,
						formatter: function(value, row, index){
							return value + "排"
						}
					},
					{
						field: 'sLie',
						title: '列',
						align: 'center',
						visible: false,
						formatter: function(value, row, index){
							return value + "列"
						}
					},
					{
						field: 'sFloor',
						title: '层',
						align: 'center',
						visible: false,
						formatter: function(value, row, index){
							return value + "层"
						}
					},
					{
						field: 'boxCode',
						title: '托盘号',
						align: 'center',
						visible: true
					},
					{
						field: 'batch',
						title: '批次',
						align: 'center',
						visible: true
					},
					{
						field: 'quantity',
						title: '数量',
						align: 'center',
						visible: true
					},
					{
						field: 'pd',
						title: '生产日期',
						align: 'center',
						visible: true
					},
					{
						field: 'exp',
						title: '有效期至',
						align: 'center',
						visible: true
					},
					{
						field: 'stowCreateTime',
						title: '码垛时间',
						align: 'center',
						formatter: function(value, row, index){
							if(value == null){
								return '-'
							}else{
								return value.slice(0, 19)
							}
						}
					}
		        ]
            };
            $.table.init(options);
        });
    </script>
</body>
</html>
